<!-- 参数 》 选项卡 -->

<template>
  <div v-bind="paramProps">
    <el-tabs v-model="model" v-bind="commonProps" :type="tabType" :stretch="stretch" @tab-click="emitChange">
      <el-tab-pane
        v-for="(item, i) in selectData"
        :key="`${item[0]}-${i}`"
        :class="getHideClass(item)"
        :name="`${item[0]}`"
        :label="item[1]"
        :disabled="getDisabled(item)"
      >
        <template #label>
          <div class="CoreWeb-tab">
            <slot name="item" :item="item">{{ item[1] }}</slot>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixParam from '../mixParam'
import FormSelect from '../../form/FormSelect'

const name = 'ParamTab'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixParam],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 下拉框数据
     */
    selectData() {
      const { state: { DICT = {} }, functionType, functionIndex } = this
      const dict = this.dict || DICT.TAB || []
      if (functionType !== 'none') return dict
      return dict.filter((item) => !(CORE.isFunction(item[functionIndex]) && item[functionIndex]()))
    },

    /**
     * 参数属性
     */
    paramProps() {
      const { hasLabel, noLabel, whole } = this
      const labelStr = hasLabel ? ' CoreWeb-SearchParam-has-label' : noLabel ? ' CoreWeb-SearchParam-no-label' : ''
      const wholeStr = whole ? ' whole' : ''
      return { class: `CoreWeb-SearchParam CoreWeb-SearchParam-auto flex0${labelStr}${wholeStr}` }
    },

    /**
     * 标签类型
     */
    tabType() {
      if (this.isCard) return 'card'
      if (this.isBorderCard) return 'border-card'
      return null
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, model } = this
      // 判断是否有值
      if (obj[prop]) return `${obj[prop]}` !== model // model 只存字符串 (el-tabs 所限)
      else return model
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, EMPTY } = this
      this.model = obj[prop] ? `${obj[prop]}` : EMPTY
    },

    /**
     * 获取最终回传值 (可覆盖)
     */
    getValue() {
      const { model, selectData, EMPTY } = this
      const matched = selectData.find(([id]) => model === `${id}`)
      return matched ? matched[0] : EMPTY
    },

    /**
     * 是否相等 (可覆盖)
     */
    equals(value) {
      const { obj, prop, init, emitChange } = this

      // 无值，但有默认值
      if (!value && init) {
        this.model = `${init}` // 设为默认值
        emitChange() // 重新走提交流程
        return true // 本次不再更新
      }

      // 有值，直接比较
      return obj[prop] === value
    },

    /**
     * 获取隐藏样式类
     */
    getHideClass: FormSelect.methods.getHideClass,

    /**
     * 获取是否禁用
     */
    getDisabled: FormSelect.methods.getDisabled,
  },
}
</script>
